<template>
    <div class="rz-chart-top">
      <div class="rz-chart-topMian">
        <div class="rz-chart-title">
          <span class="text"></span>
          <span class="">人员异动表</span>
        </div>
        <div class="rz-chart-top-mian">
          <el-form >
            <el-form-item class="ds">
              <el-select v-model="company" placeholder="请选择公司">
                <el-option
                  v-for="item in companyList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="ds">
              <el-select v-model="branch" placeholder="请选择部门">
                <el-option
                  v-for="item in branchList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="ds">
              <el-date-picker
                v-model="startTime"
                type="date"
                placeholder="起始时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item class="ds">
              <el-date-picker
                v-model="endTime"
                type="date"
                placeholder="结束时间">
              </el-date-picker>
            </el-form-item>
          </el-form>
        </div>
        <div id="rz-chartTop" ref="chartTop" ></div>
      </div>
    </div>
</template>

<script>
import echarts from 'echarts'
export default {
  data() {
    return {
      companyList: [{
        value: '选项1',
        label: '海富大'
        }, 
      ],//公司列表
      company:'',//公司内容
      branch:'',//部门内容
      branchList: [{
        value: '333',
        label: '科技部'
        }, 
      ],//部门列表
      startTime:'',//起始时间
      endTime:'',//结束时间
    }
  },
  mounted() {
    this.chartTop()
  },
  methods:{
    chartTop(){
      this.$nextTick(_ => { 
      // 基于准备好的dom，初始化echarts实例
      let bar_dv = this.$refs.chartTop;
      if (!bar_dv) {
        return;
      }
      let myChart = echarts.init(bar_dv);
      // let myChart = echarts.init(document.getElementById('rz-chartTop'));
      // 指定图表的配置项和数据
      let option = {
          title:{
            textStyle:{
              align:'left' //水平对齐
            }
          },
          legend: {//最上面的样式
            left:'2%',
            top:'5%',
            icon: "circle", 
            itemWidth:14,
            itemHeight:14,
            textStyle:{
              padding:[4,20,0,0]
            }
          },
          tooltip: {},
          dataset: {
              source: [
              ]
          },
          grid: {//柱状图位置
            top:"20%",
            left: '2%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
            axisLine: {//x轴样式
              show: true,
              lineStyle: {
                width: 0,
                // color:'#fff',
                type: "solid"
              }
            },
            axisTick:{//显示刻标
              show:false,
            },
          },
          yAxis: {
            type:'value',
            boundaryGap: [0, 0.01],
            splitNumber : 5,//y轴总共提示几个文字点
            splitLine: {//格线样式
              lineStyle: {
                color: "#eee",
              }
            },
            axisTick:{//显示刻标
              show:false,
            },
            axisLine:{//坐标轴轴线相关设置。
              show:false,
            },
            axisLabel:{
              margin:20
            }
          },
          color: ['#7A6BB0','#AD8EEF','#F15F5F','#32B5E8'],
          // Declare several bar series, each will be mapped
          // to a column of dataset.source by default.
          series: [
              {type: 'bar',name:'期初人数',barWidth:8,barGap:2,itemStyle:{normal:{barBorderRadius: [6,6,6,6]}},data:[15,20,24,24,10,12,14,20,62,11,25,12]},
              {type: 'bar',name:'新增人数',barWidth:8,barGap:2,itemStyle:{normal:{barBorderRadius: [6,6,6,6]}},data:[125,8,24,242,10,12,14,20,62,11,25,12]},
              {type: 'bar',name:'离职人数',barWidth:8,barGap:2,itemStyle:{normal:{barBorderRadius: [6,6,6,6]}},data:[1,2,24,24,10,12,14,20,62,11,25,12]},
              {type: 'bar',name:'期末人数',barWidth:8,barGap:2,itemStyle:{normal:{barBorderRadius: [6,6,6,6]}},data:[4,11,24,24,10,12,14,20,62,11,25,12]},
          ]
      };
      window.addEventListener("resize", function() {                
        myChart.resize();
      });//放大缩小自适应
      myChart.setOption(option);
      });
    },
  },
}
</script>
